@import "tailwindcss";

/* Defines a custom variant for dark mode */
@custom-variant dark (&:where(.dark, .dark *));

:root {
  --background: #ffffff;
  --foreground: #171717;
  --shadow-color: rgba(0, 0, 0, 0.1);
}

[data-theme='dark'] {
  --background: #171717;
  --foreground: #ffffff;
  --shadow-color: rgba(255, 255, 255, 0.1);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

/* Custom shadow styles */
.shadow-custom {
  box-shadow: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -2px var(--shadow-color);
}
